<template>
  <div class="HomePage">
    <!-- <div class="header">
      <div class="setting">
        <span class="placeholder">111</span>
        <h1>我的</h1>
        <span class="iconfont icon-shezhi"></span>
      </div>
      <div class="author">
        <div class="avatar">
          <img :src="avatar" alt="" />
        </div>
        <div class="author-info" v-if="login">
          <p>
            <span>Cc</span>
            <span class="iconfont icon-yiji"></span>
          </p>
          <p>
            <span class="id">ID:sd6f6sdf56ds5fs6</span>
            <span class="copy">复制</span>
          </p>
        </div>
        <div class="default-info" v-if="!login">点击登录</div>
        <div class="access">
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="openvip">
        <div class="left">
          <p>开通追书尊享会员</p>
          <p>十万书库免费看，8大权益开通即可享受</p>
        </div>
        <div class="right">
          <button>立即开通</button>
        </div>
      </div>
      <div class="advantage">
        <ul>
          <li>
            <p>免广告</p>
            <p>无广告畅读</p>
          </li>
          <li>
            <p>折扣特权</p>
            <p>付费书籍8折</p>
          </li>
          <li>
            <p>朗读功能</p>
            <p>好书读给你听</p>
          </li>
          <li>
            <p>离线缓存</p>
            <p>没网也能看</p>
          </li>
          <li>
            <p>尊贵标识</p>
            <p>VIP专属标识</p>
          </li>
          <li>
            <p>专属活动</p>
            <p>月月好礼不断</p>
          </li>
          <li>
            <p>专属客服</p>
            <p>1V1贴心服务</p>
          </li>
          <li>
            <p>自动阅读</p>
            <p>释放双手</p>
          </li>
        </ul>
      </div>
    </div> -->
    <Pageheader></Pageheader>
    <div class="content">
      <!-- 关注，粉丝 -->
      <div class="fans">
        <div>
          <span class="iconfont icon-xin"></span>
          <p>关注/粉丝</p>
        </div>
        <div>
          <span class="iconfont icon-huatong"></span>
          <p>书评/帖子</p>
        </div>
        <div>
          <span class="iconfont icon-zhizhangzhangdan"></span>
          <p>书单</p>
        </div>
        <div>
          <span class="iconfont icon-tiwen1"></span>
          <p>书荒提问</p>
        </div>
      </div>

      <!-- 我的账户 -->
      <div class="myaccount">
        <img src="../../assets/images/账户.png" alt="" />
        <div class="info">
          <p>我的账户</p>
          <p>
            <span>书币:0</span>
            <span>书券:0</span>
            <span>金币:0</span>
          </p>
        </div>
        <button class="recharge">充值</button>
        <van-icon name="arrow" />
      </div>

      <!-- 我的消息 -->
      <div class="myMsg">
        <img src="../../assets/images/消息.png" alt="" />
        <span>我的消息</span>
        <van-icon name="arrow" />
      </div>

      <div class="block">
        <div class="myMsg">
          <img src="../../assets/images/礼包.png" alt="" />
          <span>任务中心</span>
          <van-icon name="arrow" />
        </div>
        <div class="myMsg">
          <img src="../../assets/images/星星.png" alt="" />
          <span>我的等级</span>
          <van-icon name="arrow" />
        </div>
        <div class="myMsg">
          <img src="../../assets/images/观看历史.png" alt="" />
          <span>阅读历史</span>
          <van-icon name="arrow" />
        </div>
        <div class="myMsg feedback">
          <img src="../../assets/images/感叹号.png" alt="" />
          <span>意见反馈</span>
          <van-icon name="arrow" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { mapState } from "vuex";
import Pageheader from "./Pageheader"
export default {
  components: { 
    Pageheader 
  },
  data() {
    return {};
  },
  // computed: {
  //   ...mapState(["login"]),
  //   avatar() {
  //     return this.login
  //       ? require("../../assets/images/avatar.jpg")
  //       : "https://h5.zhuishushenqi.com/v2/dist/image/5a74e196801d.default-avatar.png";
  //   },
  // },
};
</script>
<style lang="less">
.HomePage {

  .content {
    background: #f3f3f3;
    // padding-top: 8px;
    margin-top: 291px;
    //粉丝
    .fans {
      display: flex;
      background: white;
      > div {
        flex: 1;
        padding: 15px 0;
        text-align: center;
        .iconfont {
          font-size: 22px;
        }
        p {
          color: #bbbaba;
          margin-top: 5px;
        }
        &:nth-child(n + 1):nth-child(-n + 3) {
          position: relative;
          &:after {
            content: "";
            height: 65%;
            width: 0.5px;
            background: #eeeeee;
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            z-index: 10;
          }
        }
      }
    }

    //我的账户
    .myaccount {
      background: white;
      margin-top: 8px;
      display: flex;
      align-items: center;
      padding: 15px 16px;
      .info {
        flex: 1;
        margin-left: 15px;
        p:first-child {
          font-size: 14px;
          font-weight: 600;
        }
        p:last-child {
          zoom: 0.9;
          color: rgb(116, 116, 116);
          margin-top: 8px;
        }
      }
      img {
        width: 25px;
      }
      .recharge {
        background: white;
        border: #b9302e 1px solid;
        color: #b9302e;
        border-radius: 20px;
        padding: 5px 20px;
        margin-right: 5px;
      }
      .van-icon-arrow {
        font-size: 18px;
        color: #ccc;
      }
    }

    //我的消息
    .myMsg {
      background: white;
      margin-top: 8px;
      padding: 15px 16px;
      display: flex;
      align-items: center;
      img {
        width: 25px;
      }
      span {
        margin-left: 15px;
        font-weight: 600;
        font-size: 14px;
        flex: 1;
      }
      .van-icon-arrow {
        font-size: 18px;
        color: #ccc;
      }
    }

    // 任务中心一块
    .block {
      margin-top: 8px;
      padding-bottom: 250px;
      background: white;
      > div {
        margin-top: 0;
        height: 60px;
        padding: 0 16px;
        span {
          border-bottom: @borderBtm;
          height: 100%;
          line-height: 60px;
        }
      }
      .feedback {
      }
    }
  }
}
</style>